<template>
  <div id="login">
    <myHeader></myHeader>
    <div class="content" :class="{ 's--signup': isActive }">
      <div class="form sign-in" :model="user">
        <h2>欢迎回来</h2>
        <label prop="username">
          <span>账号</span>
          <el-input
            v-model="LoginRequest.username"
            placeholder="请输入账号"
          ></el-input>
          <!-- <input type="email" v-model="LoginRequest.username" /> -->
        </label>
        <label prop="userpassword">
          <span>密码</span>
          <el-input
            placeholder="请输入密码"
            v-model="LoginRequest.password"
            show-password
          ></el-input>
          <!-- <input type="password" v-model="LoginRequest.password" /> -->
        </label>
        <button type="button" class="submit" @click="login">登 录</button>
      </div>
      <div class="sub-cont">
        <div class="img">
          <div class="img__text m--up">
            <h2>还未注册？</h2>
            <p>立即注册，发现大量机会！</p>
          </div>
          <div class="img__text m--in">
            <h2>已有帐号？</h2>
            <p>有帐号就登录吧，好久不见了！</p>
          </div>
          <div class="img__btn" @click="change">
            <span class="m--up">注 册</span>
            <span class="m--in">登 录</span>
          </div>
        </div>
        <div class="form sign-up" :model="form">
          <h2>立即注册</h2>
          <label prop="username">
            <span>账号</span>
            <el-input
              v-model="form.userName"
              placeholder="请输入账号"
            ></el-input>
            <!-- <input type="text" v-model="form.userName" /> -->
          </label>
          <label prop="userpassword">
            <span>密码</span>
            <el-input
              placeholder="请输入密码"
              v-model="form.userPassword"
              show-password
            ></el-input>
            <!-- <input type="passord" v-model="form.userPassword" /> -->
          </label>
          <label prop="gender">
            <span>性别</span>
            <el-select
              v-model="form.gender"
              placeholder="性别"
              style="width: 260px; height: 40px"
            >
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </label>

          <label prop="email">
            <span>邮箱</span>
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            <!-- <input type="email" v-model="form.email" /> -->
          </label>
          <label prop="phone">
            <span>手机号</span>
            <el-input
              v-model="form.phone"
              placeholder="请输入手机号"
            ></el-input>
            <!-- <input type="text" v-model="form.phone" /> -->
          </label>
          <button type="button" class="submit" @click="save">注 册</button>
          <!-- <button type="button" class="fb-btn">
            使用 <span>facebook</span> 帐号注册
          </button> -->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import myHeader from "../components/myHeader";
import request from "@/utils/request";

export default {
  name: "login",
  components: {
    myHeader,
  },
  data() {
    return {
      isActive: false, // class是否生效
      title: "动态样式",
      user: {},
      form: {},
      LoginRequest: {
        username: "",
        password: "",
      },
    };
  },

  methods: {
    change() {
      if (this.isActive) {
        this.isActive = false;
      } else {
        this.isActive = true;
      }
    },

    login() {
      request.post("/login", this.LoginRequest).then((res) => {
        if (res.code === 200) {
          if (res.msg === "管理员登录成功") {
            localStorage.setItem("admin", JSON.stringify(res.data)); // 存储用户信息到浏览器
            this.$router.push("/manager");
          }
          if (res.msg === "用户登录成功") {
            localStorage.setItem("user", JSON.stringify(res.data)); // 存储用户信息到浏览器
            this.$router.push("/");
          }
          this.$notify.success(res.msg);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },

    save() {
      request.post("/user/register", this.form).then((res) => {
        console.log(this.form);
        if (res.code == 200) {
          this.$notify.success("注册成功");
          // 提交后清空输入框
          this.form.userName = "";
          this.form.userPassword = "";
          this.form.gender = "";
          this.form.email = "";
          this.form.phone = "";
          // this.$refs["ruleForm"].resetFields();
          this.isActive = false;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.copyrights {
  text-indent: -9999px;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background: #ededed;
}

input,
button {
  border: none;
  outline: none;
  background: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

.content {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 550px;
  margin: -300px 0 0 -450px;
  background: #fff;
}

.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  padding: 50px 30px 0;
}

.sub-cont {
  overflow: hidden;
  position: absolute;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  background: #fff;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.content.s--signup .sub-cont {
  -webkit-transform: translate3d(-640px, 0, 0);
  transform: translate3d(-640px, 0, 0);
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.img {
  overflow: hidden;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background-image: url(../assets/carousel/house1.jpg);
  background-size: cover;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.content.s--signup .img:before {
  -webkit-transform: translate3d(640px, 0, 0);
  transform: translate3d(640px, 0, 0);
}

.img__text {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img__text h2 {
  margin-bottom: 10px;
  font-weight: normal;
}

.img__text p {
  font-size: 14px;
  line-height: 1.5;
}

.content.s--signup .img__text.m--up {
  -webkit-transform: translateX(520px);
  transform: translateX(520px);
}
.img__text.m--in {
  -webkit-transform: translateX(-520px);
  transform: translateX(-520px);
}

.content.s--signup .img__text.m--in {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.img__btn {
  overflow: hidden;
  z-index: 2;
  position: relative;
  width: 100px;
  height: 36px;
  margin: 0 auto;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  cursor: pointer;
}
.img__btn:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 30px;
}

.img__btn span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

.img__btn span.m--in {
  -webkit-transform: translateY(-72px);
  transform: translateY(-72px);
}

.content.s--signup .img__btn span.m--in {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.content.s--signup .img__btn span.m--up {
  -webkit-transform: translateY(72px);
  transform: translateY(72px);
}

h2 {
  width: 100%;
  font-size: 26px;
  text-align: center;
}

label {
  display: block;
  width: 260px;
  margin: 18px auto 0;
  text-align: center;
}

label span {
  font-size: 12px;
  color: #909399;
  text-transform: uppercase;
}

input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-align: center;
}

/* 性别 */
.gender {
  height: 61px;
  position: relative;
}
.sex {
  /* position: relative; */
  margin-top: -1px;
  margin-left: 92px;
}

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.forgot-pass a {
  color: #cfcfcf;
}

.submit {
  margin-top: 27px;
  margin-bottom: 20px;
  background: #d4af7a;
  text-transform: uppercase;
}

.fb-btn {
  border: 2px solid #d3dae9;
  color: #8fa1c7;
}
.fb-btn span {
  font-weight: bold;
  color: #455a81;
}

.sign-in {
  transition-timing-function: ease-out;
}
.content.s--signup .sign-in {
  transition-timing-function: ease-in-out;
  transition-duration: 0.6s;
  -webkit-transform: translate3d(640px, 0, 0);
  transform: translate3d(640px, 0, 0);
}

.sign-up {
  -webkit-transform: translate3d(-900px, 0, 0);
  transform: translate3d(-900px, 0, 0);
}
.content.s--signup .sign-up {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
</style>